React এ State এমন একটি ধারণা যা অ্যাপ্লিকেশনটির ডেটা বা স্টেট ম্যানেজমেন্টের জন্য ব্যবহৃত হয়। তবে, যখন আপনার অ্যাপ্লিকেশনটি বড় হয় এবং একাধিক কম্পোনেন্টে একে অপরের সাথে ডেটা শেয়ার করার প্রয়োজন হয়, তখন সাধারণভাবে props ব্যবহার করে এটি করা খুবই কঠিন হয়ে পড়ে। এখানে React Context API একটি শক্তিশালী সমাধান হিসাবে আসে, যা গ্লোবাল স্টেট ম্যানেজমেন্টের জন্য ব্যবহৃত হয়। Context API আপনাকে একটি স্টেট বা ডেটা সহজেই অ্যাপ্লিকেশনটির বিভিন্ন অংশে শেয়ার করতে দেয়, যা props drilling (props দিয়ে ডেটা পাঠানো) কে এড়াতে সহায়ক।
Context API এর সাহায্যে আপনি স্টেটকে একটি কেন্দ্রীয় অবস্থানে রাখেন এবং অ্যাপ্লিকেশনের বিভিন্ন কম্পোনেন্টে সেই স্টেট অ্যাক্সেস করতে পারেন।
Context API দিয়ে Global State ম্যানেজমেন্টের প্রক্রিয়া
১. Context তৈরি করা
প্রথমে আপনাকে একটি Context তৈরি করতে হবে। createContext() ফাংশনটি Context তৈরির জন্য ব্যবহৃত হয়।
import React, { createContext, useState } from 'react';
// Context তৈরি করা
const AppContext = createContext();
export default AppContext;এখানে AppContext একটি কাস্টম Context তৈরি করা হয়েছে।
২. Context Provider তৈরি করা
Context Provider একটি কম্পোনেন্ট যা স্টেট প্রদান করবে এবং যেসব কম্পোনেন্ট এই স্টেটটি ব্যবহার করতে চায়, তাদেরকে এটি প্রদান করবে। Provider একটি প্রপস হিসেবে value নেয়, যা Context-এ শেয়ার করা ডেটা।
import React, { useState } from 'react';
import AppContext from './AppContext';
const AppProvider = ({ children }) => {
// Global state তৈরি করা
const [count, setCount] = useState(0);
// স্টেট আপডেট করার ফাংশন
const increment = () => setCount(count + 1);
return (
<AppContext.Provider value={{ count, increment }}>
{children}
</AppContext.Provider>
);
};
export default AppProvider;এখানে, AppProvider একটি Context Provider যা count এবং increment ফাংশন value প্রপস হিসেবে প্রদান করছে।
৩. Context Consumer ব্যবহার করা
এখন আপনাকে যেসব কম্পোনেন্টে Global State অ্যাক্সেস করতে চান, সেখানে Context Consumer ব্যবহার করতে হবে। এর মাধ্যমে আপনি useContext হুক ব্যবহার করে Global State অ্যাক্সেস করতে পারবেন।
import React, { useContext } from 'react';
import AppContext from './AppContext';
const Counter = () => {
const { count, increment } = useContext(AppContext);
return (
<div>
<h1>Count: {count}</h1>
<button onClick={increment}>Increment</button>
</div>
);
};
export default Counter;এখানে, useContext(AppContext) হুক ব্যবহার করে আমরা AppContext থেকে count এবং increment ফাংশন প্রাপ্ত করছি। এটি পরবর্তী কম্পোনেন্টে গ্লোবাল স্টেট ব্যবহারের সুবিধা দেয়।
৪. App কম্পোনেন্টে Context Provider ব্যবহার করা
আপনি আপনার অ্যাপ্লিকেশনের মূল কম্পোনেন্টে (যেমন App.js) AppProvider ব্যবহার করে Context Provider হস্তান্তর করবেন।
import React from 'react';
import AppProvider from './AppProvider';
import Counter from './Counter';
const App = () => {
return (
<AppProvider>
<Counter />
</AppProvider>
);
};
export default App;এখানে, AppProvider এর মাধ্যমে Counter কম্পোনেন্টে গ্লোবাল স্টেট প্রদান করা হয়েছে।
Context API দিয়ে Global State ব্যবস্থাপনার সুবিধা
- Props Drilling বন্ধ করা
Context API এর মাধ্যমে আপনি প্রপস ড্রিলিং সমস্যার সমাধান করতে পারেন, যা ছোট এবং মাঝারি আকারের অ্যাপ্লিকেশনে প্রপস মাধ্যমে ডেটা পাঠানো খুব কঠিন হয়ে পড়ে। - একটি কেন্দ্রীয় স্থানে স্টেট সংরক্ষণ
আপনি অ্যাপ্লিকেশনের সমস্ত গ্লোবাল স্টেট একটি কেন্দ্রীয় স্থানে রাখতে পারবেন এবং যে কোনও কম্পোনেন্ট সহজে তা অ্যাক্সেস করতে পারবে। - সহজ এবং সহজলভ্য
Context API ব্যবহারের মাধ্যমে স্টেট ম্যানেজমেন্ট করা অনেক সহজ হয়ে যায়। Redux বা MobX এর মতো জটিল লাইব্রেরি ব্যবহার না করেও স্টেট ম্যানেজমেন্ট করা যায়। - একাধিক কম্পোনেন্টে স্টেট শেয়ার করা
Context API এর মাধ্যমে আপনি একই স্টেটকে একাধিক কম্পোনেন্টে শেয়ার করতে পারবেন, যা অ্যাপ্লিকেশনের কাঠামোকে পরিষ্কার রাখে এবং ডেটা ব্যবস্থাপনাকে আরও কার্যকর করে।
সারাংশ
React Context API একটি শক্তিশালী টুল যা গ্লোবাল স্টেট ম্যানেজমেন্টের জন্য ব্যবহৃত হয়। এটি স্টেট শেয়ার করার একটি সহজ উপায় প্রদান করে, যেখানে আপনি প্রপস ড্রিলিং এড়াতে পারেন এবং সমস্ত কম্পোনেন্টে এককভাবে স্টেট ব্যবহার করতে পারেন। Context API একাধিক কম্পোনেন্টে স্টেট শেয়ার করতে সহায়ক, এবং অ্যাপ্লিকেশনটি সহজ এবং মেইনটেনেবল রাখতে সাহায্য করে।
Read more
